import moment from 'moment';
import React, { PureComponent } from 'react';
import { Form, Input, Select, Modal, DatePicker,Row,Col, Table  } from 'antd';
import { connect } from 'dva';
import SimModel from "./simModel";
const FormItem = Form.Item;
const Option = Select.Option;
@connect(({ loading, obd }) => ({
  obd,
  loading: loading.models.obd,
}))
class CustomizedForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      simVisible:false,
      simValue:{},
      selectedRowKeys:[],
      formValues:{},
      deviceList:[]
    }
  }
  columns = [
      {
        title: '序号',
        render: (text, record, index) => `${index + 1}`,
        key: 'index',
      },
      {
        title: '设备号',
        dataIndex: 'deviceId',
        key: 'deviceId',
      },
      {
        title: 'SIM卡号',
        dataIndex: 'iccid',
        key: 'iccid',
      },
      {
        title: '厂家',
        dataIndex: 'producer',
        key: 'producer',
      },
      {
        title: '硬件版本号',
        dataIndex: 'hardwareVersion',
        key: 'hardwareVersion',
      },
      {
        title: '软件版本号',
        dataIndex: 'softwareVersion',
        key: 'softwareVersion',
      },
      {
        title: '修改时间',
        dataIndex: 'gmt_modified',
        key: 'gmt_modified',
      }
  ];
  componentWillMount(){
    const { dispatch} = this.props;
    const { formValues} = this.state;
    dispatch({
      type: 'obd/fetchQueryObdDeviceList',
      payload: { ...formValues},
      callback: (res) => {
        if (res.code !== "000000") { message.warning(res.msg); return }
        this.setState({
          deviceList:res
        })
      }
    });
  }
  okHandle = () => {
    const { submitHandle } = this.props
    submitHandle()
  };
  cancelHandle = ()=>{
    const { cancelhandle} =this.props
    cancelhandle()
  }
  // 分页change
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const params = {
      ...formValues,
      page: pagination.current,
      pageSize: pagination.pageSize,
    };
    this.setState({
      formValues: params,
    });

    dispatch({
      type: 'obd/fetchQueryObdDeviceList',
      payload: params,
      callback: (res) => {
        if (res.code !== "000000") { message.warning(res.msg); return }
        this.setState({
          deviceList: res
        })
      }
    });
  };
/**
 * 多选
 */
  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  render() {
    const { modalVisible, loading} = this.props
    const { deviceList, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <Modal
        destroyOnClose //关闭时销毁 Modal 里的子元素
        title="终端设备列表"
        visible={modalVisible}
        onOk={this.okHandle}
        width={900}
        onCancel={this.cancelHandle}
      >
        <Table
          loading={loading}
          dataSource={deviceList.list}
          columns={this.columns}
          pagination={deviceList.pagination}
          onChange={this.handleStandardTableChange}
          rowSelection={rowSelection}
          rowKey={record => record.id}
          size="small"
        />
      </Modal>
    );
  }
}
const CreateForm = Form.create()(CustomizedForm);

export default CreateForm;
